<template>
    <el-dialog :title="$t('common.modify')" :visible.sync="showDialog" width="60%">
        <div>
            <el-form label-width="100px" ref="form" :model="form" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <span>{{ $t('finance.nowAgreeAmount') }}: </span><span>{{ contractAmount }}</span>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item prop="modifyContractAmount" :label="$t('common.modify')">
                            <el-input v-model="form.modifyContractAmount" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <span>{{ $t('finance.nowHandUpAmount') }}: </span><span>{{ lateRepay }}</span>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item prop="modifyRestRepayAmount" :label="$t('common.modify')">
                            <el-input v-model="form.modifyRestRepayAmount" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <span>{{ $t('finance.isChangeRepayTime') }}</span>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item prop="showDate">
                            <el-select v-model="form.showDate" placeholder="请选择" @change="clearDate">
                                <el-option key="1" :label="$t('common.yes')" value="1"></el-option>
                                <el-option key="0" :label="$t('common.no')" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" v-show="form.showDate == 1">
                    <el-col :span="6">
                        <span>{{ $t('common.shouldRepayTime') }}</span>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item prop="modifyRepayTime">
                            <el-date-picker v-model="form.modifyRepayTime" type="date"
                                :placeholder="$t('common.plsSelectTime')">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submint">确 定</el-button>
            <el-button @click="showDialog = false">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import filters from '@/libs/filters';

export default {
    props: {
        data: {
            default: null
        }
    },
    data() {
        return {
            contractAmount:'',
            lateRepay: '',
            rules: {
                modifyContractAmount: [{ pattern: /^\d*$/, message: this.$tc('verify.plsInputNumber') }],
                modifyRestRepayAmount: [{ pattern: /^\d*$/, message: this.$tc('verify.plsInputNumber') }],
            },
            form: {
                showDate: '0',
                modifyContractAmount: '',//合同金额
                modifyRestRepayAmount: '',//挂账金额
                modifyRepayTime: ''//应还时间
            },
            showDialog: false,
            formatCurrency: filters.formatCurrency
        };
    },
    watch: {
        showDialog(val) {
            if (val) {
                this.form={
                    showDate: '0',
                    modifyContractAmount: '',//合同金额
                    modifyRestRepayAmount: '',//挂账金额
                    modifyRepayTime: ''//应还时间
                }
                this.getOrder();
            }
        }
    },
    methods: {
        clearDate(val){
            if(val==0){
                this.form.modifyRepayTime = ''
            }
        },
        getOrder() {
            let params = {
                orderId: this.data.orderId
            };
            this.$api.finance.repay.getRepayScheduleDtoByOrderId(params).then(res => {
                const { status, data, error } = res;
                if ('1' === status && '00000000' === error) {
                    this.contractAmount=data.contractAmount;
                    this.lateRepay=data.restRepay;
                }
            })
        },
        submint() {
            this.$refs['form'].validate(val => {
                if (val) {
                    let params = {
                        orderId: this.data.orderId,
                        modifyContractAmount: this.form.modifyContractAmount,//合同金额
                        modifyRestRepayAmount: this.form.modifyRestRepayAmount,//挂账金额
                        modifyRepayTime: this.form.modifyRepayTime==''?this.form.modifyRepayTime:this.$options.filters.formatDate(this.form.modifyRepayTime, 'yyyy-MM-dd hh:mm:ss'),//应还时间
                        applyType: this.data.applyType,
                        domain: this.data.domain,
                        appName: this.data.appName,
                    };
                    if (params.modifyContractAmount != '' || params.modifyRestRepayAmount != '' || params.modifyRepayTime != '') {
                        this.$api.finance.loan.retroversion(params).then(res => {
                            const { status, data, error } = res;
                            if ('1' === status && '00000000' === error) {
                                this.showDialog = false;
                                this.$message.success('change success')
                                this.$emit('submint')
                            }
                        })

                    } else {
                        this.$message.error(this.$t('common.plsInputChangeContent'))

                    }
                }
            })
        },
        changeDialog() {
            this.showDialog = true
        },
    }
}
</script>
<style lang="scss" scoped>
.tips {
    font-weight: bold;
    font-size: 23px;
    padding-top: 30px;
}
</style>